import { computed, defineComponent, onMounted, PropType } from 'vue'

export default defineComponent({
  name: 'MsModal',
  props: {
    title: {
      type: String as PropType<string>,
      default: ''
    },
    isAdd: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    visible: {
      type: Boolean as PropType<boolean>,
      required: true
    },
    width: {
      type: String as PropType<string>,
      default: ''
    },
    footer: {
      type: Boolean as PropType<boolean>,
      default: true
    }
  },
  emits: ['update:visible'],
  setup(props, { slots, emit }) {
    const toggleVisible = (val = false) => emit('update:visible', val)

    const newTitle = computed(() => props.title ? props.title : props.isAdd ? '添加' : '修改')

    return () => {
      return (
        <a-modal
          title={newTitle.value}
          visible={props.visible}
          onCancel={() => toggleVisible()}
        >
          { slots.default?.() }
        </a-modal>
      )
    }
  }
})
